<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>NumberFormat component examples</title>
    <script src="../../../node_modules/vue/dist/vue.global.js"></script>
    <script src="../../../packages/vue-i18n/dist/vue-i18n.global.js"></script>
  </head>
  <body>
    <h1>NumberFormat component examples</h1>

    <div id="app">
      <h2>basic usages:</h2>
      <i18n-n tag="p" class="p1" :value="100"></i18n-n>
      <i18n-n tag="p" class="p2" :value="100" format="currency"></i18n-n>
      <i18n-n
        tag="p"
        class="p3"
        :value="100"
        format="currency"
        locale="ja-JP"
      ></i18n-n>

      <h2>slot usages:</h2>
      <i18n-n
        tag="div"
        class="slot"
        :value="1234"
        :format="{ key: 'currency', currency: 'EUR' }"
      >
        <template #currency="props"
          ><span style="color: green">{{ props.currency }}</span></template
        >
        <template #integer="props"
          ><span style="font-weight: bold">{{ props.integer }}</span></template
        >
        <template #group="props"
          ><span style="font-weight: bold">{{ props.group }}</span></template
        >
        <template #fraction="props"
          ><span style="font-size: small">{{ props.fraction }}</span></template
        >
      </i18n-n>
    </div>
    <script>
      const { createApp } = Vue
      const { createI18n } = VueI18n

      const i18n = createI18n({
        legacy: false,
        locale: 'en-US',
        numberFormats: {
          'en-US': {
            currency: {
              style: 'currency',
              currency: 'USD',
              currencyDisplay: 'symbol'
            },
            decimal: {
              style: 'decimal',
              useGrouping: false
            }
          },
          'ja-JP': {
            currency: {
              style: 'currency',
              currency: 'JPY',
              currencyDisplay: 'symbol'
            },
            numeric: {
              style: 'decimal',
              useGrouping: false
            },
            percent: {
              style: 'percent',
              useGrouping: false
            }
          }
        }
      })

      const app = createApp({})
      app.use(i18n)
      app.mount('#app')
    </script>
  </body>
</html>
